<template>
  <div class="examInfo_container">
    <el-row :gutter="10">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="left">

        <div class="leftItem">

          <p>
            当前考试名称：

          </p>
          <p class="name">
            {{examInfo.theme}}

          </p>

          <p>
            考试限时：

          </p>
          <p class="name">
            {{examInfo.duration}}

          </p>

          <p>
            考试时间：
          </p>
          <p class="name">
            {{examInfo.startTime}}至 {{examInfo.endTime}}
          </p>

        </div>

        <div class="left_footer">

          <el-button type="primary" @click="toIndex"> 返回首页</el-button>

          <el-button type="primary" @click="recordlist()">我的考试记录</el-button>

        </div>

      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <bgmusic></bgmusic>
        <div class="rightItem">

          <div class="info">

            <h5 class="name"> {{examInfo.theme}}测试榜单</h5>

          </div>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="rank" label="排名" width="110">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="110">
            </el-table-column>
            <el-table-column prop="unit" label="单位信息">
            </el-table-column>

            <el-table-column prop="totalPoint" label="分数" width="110">
            </el-table-column>

            <el-table-column prop="examTime" label="用时" width="110">
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination :page-size="pagesize" background layout="prev, pager, next" :total="total" @prev-click="current_change" @next-click="current_change" @current-change="current_change">
            </el-pagination>
          </div>

        </div>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import path from '@/network'
// import bgmusic from '../components/bgmusic.vue'
export default {
  name: 'App',
  components: {
    // bgmusic
  },
  data () {
    return {
      examPaper: JSON.parse(sessionStorage.getItem("examPaper")),
      examInfo: JSON.parse(sessionStorage.getItem('examInfo')),
      examResultInfo: JSON.parse(sessionStorage.getItem('examResultInfo')),
      examId: this.$route.query.id,
      total: 0,
      pagesize: 9,
      currentPage: 1,



      tableData: []


    };
  },
  created () {
  },
  mounted () {
    this.rank()
  },

  methods: {

    //获取list
    rank () {
      path.rank({
        examId: this.$route.query.id,
        page: this.currentPage,
        pageSize: this.pagesize,
      }).then(res => {
        if (res.success === 0) {
          this.tableData = res.rows
          this.total = res.total;
        }

      })
    },


    current_change: function (currentPage) {
      this.currentPage = currentPage;
      this.rank();
    },


    toplist: function () {
      this.$router.push({ name: 'toplist', query: { id: this.$route.query.id, } })
    },

    recordlist: function () {
      this.$router.push({ name: 'recordlist', query: { id: this.$route.query.id } })
    },

    toIndex: function () {
      this.$router.push({ name: 'index' })
    },



  }
}

</script>